<template>
  <div>
    <div class="container">
      <div class="header">
        <div class="top">
          <div class="top-left">
            <div class="logo">
              <img
                width="35px"
                height="35px"
                src="../../assets/home/head/logo1.png"
                alt=""
              />
              <h2>湖州市数字国土空间</h2>
            </div>
          </div>
          <!-- <div class="selprovince">
            <select>
              <option>请选择</option>
              <option>浙江省</option>
            </select>
          </div> -->
          <div class="user">
            <ul>
              <li class="date">{{ dateday }}</li>
              <li>|</li>
              <li>
                <span class="iconuser">
                  <img src="@/assets/home/head/user.png" alt="" />
                </span>
                <span class="text">Admin,您好</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="middle">
          <input type="text" placeholder="请输入搜索关键字" />
          <button class="search">搜索</button>
        </div>
      </div>
      <div class="body"></div>
      <!-- 主体部分 -->
      <div class="main">
        <div class="tip">
          <div class="importtask">重大任务</div>
          <div class="application">应用场景</div>
        </div>
        <div class="m-left">
          <div class="importcontent">
            <div class="tasklist">
              <ul class="leftul">
                <li>
                  <a href="#">
                    <img
                      class="taskicon"
                      src="@/assets/home/main/l1.png"
                      alt=""
                    />
                    <p class="tasktxt">要素保障</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img
                      class="taskicon"
                      src="@/assets/home/main/l2.png"
                      alt=""
                    />
                    <p class="tasktxt">用地改革</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img
                      class="taskicon"
                      src="@/assets/home/main/l3.png"
                      alt=""
                    />
                    <p class="tasktxt">生态修复</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img
                      class="taskicon"
                      src="@/assets/home/main/l4.png"
                      alt=""
                    />
                    <p class="tasktxt">地灾防治</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="m-center">
          <ul class="nav-item1">
            <li class="itemf">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="task1">我的任务</span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                    >更多</el-button
                  >
                </div>
                <div class="mytask">
                  <div class="item1">
                    <img
                      class="img1"
                      src="@/assets/home/main/main-top-1.png"
                      alt=""
                    />
                    <span class="txt">要素保障</span>
                    <span class="title">盘活存量建设用地</span>
                    <span class="number"
                      ><span class="fontweight">10</span
                      ><span class="min">万亩</span></span
                    >
                  </div>
                  <div class="item2">
                    <img
                      class="img1"
                      src="@/assets/home/main/main-top-2.png"
                      alt=""
                    />
                    <span class="txt">用地改革</span>
                    <span class="title">上图入库</span>
                    <span class="number">
                      <span class="fontweight">100</span>
                      <span class="min">%</span>
                    </span>
                  </div>
                  <div class="item3">
                    <img
                      class="img1"
                      src="@/assets/home/main/main-top-3.png"
                      alt=""
                    />
                    <span class="txt">生态修复</span>
                    <span class="title">废弃矿山修复</span>
                    <span class="number">
                      <span class="fontweight">10</span>
                      <span class="min">座</span>
                    </span>
                  </div>
                </div>
              </el-card>
            </li>
            <li class="itemr">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="task1">我的办公</span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                    >更多</el-button
                  >
                </div>
                <div class="btns">
                  <el-button type="primary" @click="Towindow"
                    >新建任务</el-button
                  >
                  <el-button type="primary" @click="Todo">待办事项</el-button>
                  <el-button type="primary" @click="Todb">督办事项</el-button>
                  <!-- <el-button type="primary">重要信息</el-button> -->
                </div>
              </el-card>
            </li>
          </ul>
          <ul class="nav-item2">
            <li class="itemf">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="task1">核心指标</span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                    >更多</el-button
                  >
                </div>
                <div class="corepicture">
                  <div class="coreitem">
                    <div class="coretxt">
                      上图入库率<span
                        ><img
                          width="10px"
                          height="10px"
                          src="@/assets/home/main/text.png"
                          alt=""
                      /></span>
                    </div>
                    <div class="coreinfo">
                      <div id="echarts"></div>
                      <ul class="zhibiao">
                        <li>
                          <div class="zbtext">年度目标</div>
                          <div class="zbpercent">
                            <span class="fontweight">100</span>
                            <span class="min">%</span>
                          </div>
                        </li>
                        <li>
                          <div class="zbtext">起始值</div>
                          <div class="zbpercent">
                            <span class="fontweight">0</span>
                            <span class="min">%</span>
                          </div>
                        </li>
                        <li>
                          <div class="zbtext">当前值</div>
                          <div class="zbpercent">
                            <span class="fontweight">0</span>
                            <span class="min">%</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="coreitem">
                    <div class="coretxt">
                      盘活城镇存量建设用地<span
                        ><img
                          width="10px"
                          height="10px"
                          src="@/assets/home/main/text.png"
                          alt=""
                      /></span>
                    </div>
                    <div class="coreinfo">
                      <div id="echarts1"></div>
                      <ul class="zhibiao">
                        <li>
                          <div class="zbtext">年度目标</div>
                          <div class="zbpercent">
                            <span class="fontweight">10</span>
                            <span class="min">万亩</span>
                          </div>
                        </li>
                        <li>
                          <div class="zbtext">起始值</div>
                          <div class="zbpercent">
                            <span class="fontweight">10</span>
                            <span class="min">万亩</span>
                          </div>
                        </li>
                        <li>
                          <div class="zbtext">当前值</div>
                          <div class="zbpercent">
                            <span class="fontweight">0</span>
                            <span class="min">万亩</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-card>
            </li>
            <li class="itemr">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="task1">工作动态</span>
                </div>
                <div class="jobtask">
                  <ul>
                    <li>
                      <div class="notice">
                        <el-tooltip
                          content='发布<<浙江省"数字国土空间">>建设方案'
                          placement="top"
                        >
                          <span>
                            <a href="#"
                              >发布&lt;&lt;浙江省"数字国土空间"&gt;&gt;建设方案</a
                            >
                          </span>
                        </el-tooltip>
                      </div>
                      <div class="job-date">2021-05-22</div>
                    </li>
                    <li>
                      <div class="notice">
                        <el-tooltip
                          content="召开数字化改革领导小组第一次全体会议"
                          placement="top"
                        >
                          <span>
                            <a href="#">召开数字化改革领导小组第一次全体会议</a>
                          </span>
                        </el-tooltip>
                      </div>
                      <div class="job-date">2021-05-22</div>
                    </li>
                    <li>
                      <div class="notice">
                        <el-tooltip
                          content="分管局领导听取输转工作已近汇报"
                          placement="top"
                        >
                          <span>
                            <a href="#">分管局领导听取输转工作已近汇报</a>
                          </span>
                        </el-tooltip>
                      </div>
                      <div class="job-date">2021-05-22</div>
                    </li>
                    <li>
                      <div class="notice">
                        <el-tooltip
                          content="自然资源数字化改革专班成立"
                          placement="top"
                        >
                          <span>
                            <a href="#">自然资源数字化改革专班成立</a>
                          </span>
                        </el-tooltip>
                      </div>
                      <div class="job-date">2021-05-22</div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </li>
          </ul>
          <ul class="nav-item3">
            <li class="itemf">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="task1">一键达</span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                    >更多</el-button
                  >
                </div>
                <div class="yijianda">
                  <div class="yj-l">
                    <div>
                      <button class="yjbtn" round>地政审批</button>
                    </div>
                    <button class="yjbtn" round>规划实施监督</button>
                  </div>
                  <div class="yj-c">
                    <div>
                      <img
                        src="@/assets/home/main/arrow-c.png"
                        width="210"
                        height="120"
                      />
                    </div>
                    <!-- <button  class="yjbtn" round style="background-color:blue">系统门户</button> -->
                  </div>
                  <div class="yj-r">
                    <button class="yjbtn" round>矿政审批</button>
                    <button class="yjbtn" round @click="Tomap">
                      一体化审批
                    </button>
                  </div>
                </div>
              </el-card>
            </li>
            <li class="itemr">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span class="task1">一张图</span>
                  <el-button style="float: right; padding: 3px 0" type="text"
                    >更多</el-button
                  >
                </div>
                <div class="dtpicture">
                  <img
                    src="@/assets/home/main/dt.png"
                    alt=""
                    @click="Todt"
                    width="700px"
                    height="500px"
                  />
                </div>
              </el-card>
            </li>
          </ul>
        </div>

        <div class="m-right">
          <div class="appconent">
            <ul class="rightul">
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r1.png" alt="" />
                  <div class="apptxt">规划协同</div>
                </a>
              </li>

              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r2.png" alt="" />
                  <div class="apptxt">码上批地</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r3.png" alt="" />
                  <div class="apptext3">不动产登记</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r4.png" alt="" />
                  <div class="apptxt">藏粮于地</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r5.png" alt="" />
                  <div class="apptxt">天巡地查</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r6.png" alt="" />
                  <div class="apptxt">地灾智治</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r7.png" alt="" />
                  <div class="apptxt">用矿审批</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r8.png" alt="" />
                  <div class="apptxt">用海审批</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img class="appicon" src="@/assets/home/main/r9.png" alt="" />
                  <div class="apptxt">生态修复</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    class="appicon"
                    src="@/assets/home/main/r10.png"
                    alt=""
                  />
                  <div class="apptxt">三改一拆</div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img
                    class="appicon"
                    src="@/assets/home/main/r11.png"
                    alt=""
                  />
                  <div class="apptxt">地信服务</div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入eachts文件
import echarts from "echarts";
// import "echarts/theme/macarons";
// import OperatorRender from "../example/OperatorRender.vue";
export default {
  data() {
    return {
      dateday: "",
    };
  },
  // components: { OperatorRender },
  mounted() {
    this.drawPie();
    this.drawPie1();
    this.getDate();
  },
  methods: {
    drawPie() {
      const mychart = echarts.init(document.getElementById("echarts"));
      let option = {
        color: ["#0E53FD", "#F1F2F3"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["70%", "100%"],
            avoidLabelOverlap: true,
            label: {
              // show: false,
              // position: "center",
              normal: {
                show: true,
                position: "center",
                formatter: function () {
                  return "30%";
                },
                textStyle: {
                  fontSize: 10,
                  color: "#0E53FD",
                  fontWeight: 700,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 200, name: "直接访问" },
              { value: 600, name: "搜索引擎" },
            ],
          },
        ],
      };
      mychart.setOption(option);
    },
    //图表2
    drawPie1() {
      const mychart1 = echarts.init(document.getElementById("echarts1"));
      let option = {
        color: ["#0E53FD", "#F1F2F3"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["70%", "100%"],
            avoidLabelOverlap: true,
            label: {
              // show: false,
              // position: "center",
              normal: {
                show: true,
                position: "center",
                formatter: function () {
                  return "30%";
                },
                textStyle: {
                  fontSize: 10,
                  color: "#0E53FD",
                  fontWeight: 700,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 200, name: "直接访问" },
              { value: 600, name: "搜索引擎" },
            ],
          },
        ],
      };
      mychart1.setOption(option);
    },

    getDate() {
      const date = new Date();
      const year = date.getFullYear();
      const monuth = date.getMonth() + 1;
      const day = date.getDate();
      return (this.dateday = year + "年" + monuth + "月" + day + "日");
    },
    // 跳到窗口
    Towindow() {
      window.localStorage.setItem("menuIndex", 1);
      window.localStorage.setItem("menuKey", "zhck");
      this.$router.push("/integratedWindow/integratedAccept");
    },
    // 跳到代办箱
    Todo() {
      window.localStorage.setItem("menuIndex", 3);
      window.localStorage.setItem("menuKey", "ywsp");
      this.$router.push("/todoBox");
    },
    // 跳到督办箱
    Todb() {
      window.localStorage.setItem("menuIndex", 3);
      window.localStorage.setItem("menuKey", "ywsp");
      this.$router.push("/businessApproval/urgeBox");
    },
    Todt() {
      this.$router.push("gmap/map2D");
    },
    Tomap() {
      this.$router.push("gmap/map2D");
    },
  },
};
</script>

<style lang="scss" scoped>
// 全局样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul li {
  list-style: none;
}
.container {
  width: 100%;
  position: relative;
}
// 头部样式
.header {
  width: 100%;
  height: 375px;
  background-image: url("../../assets/home/head/background.png");
  .top {
    padding-top: 24px;
    height: 60px;

    .top-left {
      float: left;
      height: 50px;
      width: 500px;
      .logo {
        height: 50px;
        width: 330px;
        margin-left: 11px;
        // margin-right: 20px;
        img {
          margin-left: 10px;
          float: left;
        }
        h2 {
          float: right;
          color: #fff;
          font-size: 28px;
          margin-right: 8px;
          font-family: Arial, Helvetica, sans-serif;
        }
      }
    }
    .selprovince {
      float: left;
    }
    select {
      margin-top: 10px;
      margin-left: -100px;
      border: none;
      background-color: transparent;
      color: #ccc;
    }
    .user {
      float: right;
      .iconuser {
        margin: 0 10px 0 8px;
      }
      .date {
        margin: 0 8px 0 8px;
        font-size:16px;
      }
      .text{
        font-size:16px;

      }
      ul li {
        display: inline-block;
        color: white;
      }
    }
  }

  .middle {
    position: relative;
    // padding-top: 50px;
    margin-top: 30px;
    height: 60px;
    input {
      text-indent: 1em;
      float: left;
      width: 632px;
      height: 56px;
      position: absolute;
      top: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
      // margin-left: 500px;
      border-radius: 28px;
      border: none;
      outline: none; // 获取焦点时不显示边框
    }
  }

  .middle .search {
    position: absolute;
    top: 48%;
    left: 61%;
    // transform: translate(-20%,-50%);
    height: 40px;
    line-height: 40px;
    width: 100px;
    border: none;
    border-radius: 40px;
    background-color: blue;
    color: white;
  }
}
// 中间部分样式
.main {
  width: 98%;
  margin: 1% auto;
  // margin-top: -10%;
  position: absolute;
  top:55%;
  left: 50%;
  transform: translate(-50%,-50%);

  .tip {
    display: flex;
    justify-content: space-between;
  }

  .importtask {
    padding-bottom: 10px;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    font-family: "Alibaba PuHuiTi";
    text-align: center;
    margin-left: 140px;
  }
  .application {
    margin-right: 140px;
    padding-bottom: 10px;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    font-family: "Alibaba PuHuiTi";
    text-align: center;
  }
  .m-left {
    float: left;
    width: 20%;
    height: 100%;
    // background: plum;
    background-image:  url("../../assets/home/main/main-leftb1.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;

    .importcontent {
      height: 941px;
      width: 100%;
      // border-radius: 10px;
      .tasklist {
        // width: 219px;
        width: 100%;
        height: 100%;
        // background-image: url("../../assets/home/main/main-leftb.png");
        // background-size: 265px 985px;

        .leftul {
          height: 100%;
        }
        .leftul li {
          padding-top: 20px;
          margin-bottom: 40px;
          height: 50px;
        }
        .leftul li a {
          display: block;
          height: 60px;
          .taskicon {
            margin-left: 40px;
            transform: scale(1.5);
            float: left;
          }
          .tasktxt {
            float: left;
            font-size: 18px;
            line-height: 20px;
            margin-top: 10px;
            margin-left: 30px;
          }
        }
      }
    }
  }
  .m-center {
    float: left;
    height: 100%;
    width: 58%;
    margin: 0 1%;
    // 1区域
    .nav-item1 {
      width: 100%;
      display: flex;
      li {
        flex: 1;
      }
      .itemf {
        .task1 {
          font-size: 20px;
        }
        margin: 0 19px 0 0;
        .el-card {
          height: 340px;
          border-radius: 10px;
          .mytask {
            .item1 {
              width: 490px;
              height: 60px;
              background-image: url("../../assets/home/main/main-top-g.png");
              background-size: 100% 100%;
              .img1 {
                float: left;
                margin: 18px 0 0 20px;
              }
              .txt {
                float: left;
                font-size: 18px;
                font-weight: bold;
                margin-left: 20px;
                margin-top: 20px;
                color: blue;
              }
              .title {
                float: left;
                margin-left: 90px;
                margin-top: 18px;
                font-size: 14px;
              }
              .number {
                float: right;
                margin-top: 16px;
                color: blue;
              }
            }

            .item2 {
              width: 490px;
              height: 60px;
              margin-top: 20px;
              background-image: url("../../assets/home/main/main-top-g.png");
              background-size: 100% 100%;
              .img1 {
                float: left;
                margin: 18px 0 0 20px;
              }
              .txt {
                float: left;
                font-size: 18px;
                font-weight: bold;
                margin-left: 20px;
                margin-top: 18px;
                color: blue;
              }
              .title {
                float: left;
                margin-left: 90px;
                margin-top: 18px;
                font-size: 10px;
              }
              .number {
                float: right;
                margin-top: 16px;
                margin-right: 10px;
                color: blue;
              }
            }
            .item3 {
              width: 490px;
              height: 60px;
              margin-top: 20px;
              background-image: url("../../assets/home/main/main-top-g.png");
              background-size: 100% 100%;
              .img1 {
                float: left;
                margin: 18px 0 0 20px;
              }
              .txt {
                float: left;
                font-size: 18px;
                font-weight: bold;
                margin-left: 20px;
                margin-top: 18px;
                color: blue;
              }
              .title {
                float: left;
                margin-left: 90px;
                margin-top: 18px;
                font-size: 10px;
              }
              .number {
                float: right;
                margin-top: 16px;
                margin-right: 15px;
                color: blue;
              }
            }
          }
        }
      }
      .itemr {
        .task1 {
          font-size: 20px;
        }
        height: 340px;
        .task1 {
          font-size: 20px;
        }
        .el-card {
          height: 340px;
          border-radius: 10px;
          .btns {
            text-align: center;
          }
          .btns .el-button {
            width: 108px;
            height: 42px;
          }
        }
      }
    }
    // 2 区域
    .nav-item2 {
      width: 100%;
      display: flex;
      margin-top: 18px;
      li {
        flex: 1;
      }
      .itemf {
        .task1 {
          font-size: 20px;
        }
        height: 289px;
        margin: 0 19px 0 0px;
        .corepicture {
          height: 180px;
        }
        .el-card {
          height: 289px;
          border-radius: 10px;

          .coreitem {
            margin-bottom: 10px;
            .coretxt {
              font-size: 8px;
              margin-top: -10px;
              img {
                margin-left: 5px;
              }
            }
            .coreinfo {
              height: 75px;
              margin-top: 10px;
              #echarts {
                float: left;
                width: 65px;
                height: 65px;
                margin-left: 10px;
                // border: 1px solid red;
              }
              .zhibiao {
                float: right;
                display: flex;
                width: 250px;
                li {
                  float: left;
                  flex: 1;
                  margin-left: 10px;
                  .zbtext {
                    font-size: 14px;
                  }
                  .zbpercent {
                    margin-top: 5px;
                    color: blue;
                    text-align: center;
                  }
                }
              }
            }
          }

          #echarts1 {
            float: left;
            width: 65px;
            height: 65px;
            margin-left: 10px;
            // border: 1px solid red;
          }
        }
      }
      .itemr {
        .task1 {
          font-size: 20px;
        }
        width: 445px;
        height: 289px;
        .el-card {
          height: 289px;
          border-radius: 10px;
          .jobtask ul {
            height: 189px;
          }
          .jobtask ul li {
            margin-bottom: 30px;
            list-style-type: disc;
            color: blue;
            margin-left: 10px;
            span {
              font-size: 14px;
              color: black;
            }
            .notice {
              float: left;
              width: 257px;
              height: 25px;
              // border: 1px solid red;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .job-date {
              float: right;
              // width:57px;
              font-size: 14px;
              color: #000000;
            }
          }
        }
      }
    }
    // 3区域
    .nav-item3 {
      width: 100%;
      display: flex;
      margin-top: 21px;
      li {
        flex: 1;
        // border: 1px solid red;
      }
      .itemf {
        .task1 {
          font-size: 20px;
        }
        height: 273px;
        margin: 0 19px 0 0px;
        .el-card {
          height: 273px;
          border-radius: 10px;
          .yijianda {
            height: 140px;
            margin: 10px 0 40px 0;
            display: flex;
            .yjbtn {
              width: 130px;
              height: 42px;
              border-radius: 21px;
              border: 1px solid skyblue;
              text-align: center;
              font-size: 8px;
              background-color: #fff;
            }
            .yj-l {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            }
            .yj-c {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              button {
                color: white;
              }
            }
            .yj-r {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            }
          }
        }
      }
      .itemr {
        .task1 {
          font-size: 20px;
        }
        height: 273px;
        .el-card {
          height: 273px;
          border-radius: 10px;
          .dtpicture {
            position: relative;
            width: 414px;
            height: 170px;
            img {
              transform: scale(0.67, 0.6);
              margin-top: -70px;
              margin-left: -110px;
            }
          }
        }
      }
    }
  }

  .m-right {
    float: right;
    width: 20%;
    height: 100%;
    // background-color: plum;

    // 右侧样式
    .appconent {
      // width: 220px;
      width: 100%;
      height: 941px;
      background-color: white;
      border-radius: 10px;
      .rightul {
        height: 100%;
      }
      .rightul li {
        padding-top: 20px;
        margin-bottom: 20px;
        height: 40px;
      }
      .rightul li a {
        display: block;
        height: 60px;
        .appicon {
          margin-left: 50px;
          transform: scale(1.5);
          float: left;
        }
        .apptxt {
          float: left;
          margin-left: 30px;
          font-size: 18px;
          line-height: 20px;
          margin-top: 5px;
        }
        .apptext3 {
          margin-left: 100px;
          font-size: 18px;
        }
      }
    }
  }
}
.body {
  width: 100%;
  height: 800px;
  background-color: #eeeeef;
}
</style>